<template>
    <div class="index">
        <div class="top clearfix">
            <div class="logo left">
                <div class="logo-img  flex flex-align-center flex-pack-center">
                    <img src="./../../assets/logo1.png" height="40" width="121" alt="">
                </div>
            </div>
            <div class="topCenterBox position-center-middle">
                <div class="top_item left" v-for='(item,ind) in topBar' :class="{'top_item_active_class':item.isOpen}">
                    <div v-if="!item.son.length" @click="handle(item,ind)">
                       <router-link class="drop-down-item" :to="item.routeName" tag="p" :key="ind" active-class="top_item_active_class" v-text="item.name"></router-link>
                    </div>
                    <div v-else>
                        <p v-text="item.name"></p>
                        <div class="drop-down-box" @click="handle(item,ind)">
                            <router-link class="drop-down-item" :to="oitem.routeName" tag="div" :key="oind" v-for='(oitem,oind) in item.son' v-text="oitem.name" active-class="active_class"> 
                                
                            </router-link>
                        </div>
                    </div>

                </div>
            </div>
            <div class="user clearfix">
                <div class="left userLeft">
                    <p v-text="store.storeName"></p>
                    <p v-text="store.employeeName"></p>
                </div>
                <div class="left userIcon flex flex-align-center flex-pack-center">
                    <i class="iconfont icon-yonghu1"></i>
                </div>
                <div class="right useRight flex flex-align-center flex-pack-center" >
                    <i class="iconfont icon-xiala"></i>
                    <i class="iconfont icon-shangla"></i>
                </div>
                <div class="logoOutBox">
                    <p v-text="store.storeName"></p>
                    <div class="btn" @click="cutStore"><i class="iconfont icon-exchange2jiaohuan"></i>切换店铺</div>
                    <p>当前帐号</p>
                    <p v-text="store.employeeName"></p>
                    <div class="btn" @click="logout"><i class="iconfont icon-icon"></i>退出登录</div>
                </div>
            </div>
        </div>
        <router-view class="router-view-box" :storeId ="storeId" :store ="store"></router-view> 
    </div>
</template>
<script type="text/javascript">
export default{
    data(){
        return {
            noAuthtopBar:[
                {
                    name:"吧台",
                    son:[
                        {name:'上架',routeName:`/Bar_Inner`},
                        {name:'下架',routeName:`/Bar_Outer`},
                    ],
                    isOpen:false,
                    routeName:null
                },
            ],
            topBar:[
                {
                    name:"首页",
                    son:[
                       
                    ],
                    isOpen:1,
                    routeName:`/Home`,
                    isActive:0, 
                },
                

                {
                    name:"仓库",
                    son:[
                        {name:'入库',routeName:`/Stock_Inner`},
                        {name:'出库',routeName:`/Stock_Outer`},
                        {name:'仓库盘点',routeName:`/Stock_Check`},
                        {name:'出入库记录',routeName:`/Stock_Record`}
                    ],
                    isOpen:false,
                    routeName:null
                },
                {
                    name:"吧台",
                    son:[
                        {name:'上架',routeName:`/Bar_Inner`},
                        {name:'下架',routeName:`/Bar_Outer`},
                        {name:'吧台盘点',routeName:`/Bar_Check`},
                        {name:'出入库记录',routeName:`/Bar_Record`}
                    ],
                    isOpen:false,
                    routeName:null
                },
                // {
                //     name:"原料仓库",
                //     son:[
                //         {name:'原料入库',routeName:`/Stock_Inner`},
                //         {name:'原料出库',routeName:`/Stock_Outer`},
                //         {name:'仓库盘点',routeName:`/Stock_Check`},
                //         {name:'出入库记录',routeName:`/Stock_Record`}
                //     ],
                //     isOpen:false,
                //     routeName:null
                // },
                // {
                //     name:"原料吧台",
                //     son:[
                //         {name:'原料上架',routeName:`/Bar_Inner`},
                //         {name:'原料下架',routeName:`/Bar_Outer`},
                //         {name:'吧台盘点',routeName:`/Bar_Check`},
                //         {name:'出入库记录',routeName:`/Bar_Record`}
                //     ],
                //     isOpen:false,
                //     routeName:null
                // },
            ],
            storeId:'',
            store:{}
        }
    },
    watch: {
        '$route':function (val) {
            this.initActiveClass();
        }
    },
    methods: {
        //切换top-item的下边框
        handle(item,ind){
            for(var i = 0,len = this.topBar.length; i < len;i++){  
               this.topBar[i].isOpen = false;
            }
            this.topBar[ind].isOpen = true;
        },
        initActiveClass(){
            let ind= 0;
            for(var i = 0,len = this.topBar.length; i < len;i++){
                this.topBar[i].isOpen = false;
                if(this.topBar[i].son.length) {
                    for(var j = 0,lens = this.topBar[i].son.length; j < lens;j++){
                           
                        if(this.topBar[i].son[j].routeName=='/'+this.$route.name){
                            ind = i;
                        };
                    }
                }else{
                    ind = i;
                }
            };
            this.topBar[ind].isOpen = true;
        },
        logout(){
            this.$http.post('/logout', {}).then((res)=>{
                localStorage.clear();
                sessionStorage.clear();
                this.$router.push('/login')
            }).catch((err)=>{

            })
        },
        cutStore(){
            if ( !JSON.parse(sessionStorage.getItem('allStore')) ) {
                this.$router.push('login');
                return;
            }else{
                if ( JSON.parse(sessionStorage.getItem('allStore')).length<=1 ) {
                    this.$message({
                        showClose: true,
                        message: '无更多店铺',
                        type: 'error'
                    })
                    return;
                }else{
                    this.$router.push('ChoiceStore');
                };
            }
        }
    },
    created: function () {
        if ( !JSON.parse(sessionStorage.getItem('store')) ) {
            this.$router.push('login');
            return;
        }
        this.store = JSON.parse(sessionStorage.getItem('store'));
        this.storeId = JSON.parse(sessionStorage.getItem('store')).storeId;
        const noAuth = [
            "5a08a42c-51bc-11ec-a9d2-7b22efb66231",
            "6fa96396-65ff-11eb-8b28-c9dec87cec62",
            "629bc3a4-0c01-11ee-ac1a-af7435910764",
            "2d263b68-18bc-11ea-b755-7f716f4b59ed",
            "c5bc2e21-e9b4-11e9-8694-715aa067be97",
            "455d0df2-09e1-11eb-8122-99aa79dd05ca",
            "57fa3c56-aecd-11ee-a05e-e5ddd27a2e96",
            "478ecd3a-1b09-11ed-b2ba-3b1b540612d0",
            "08403718-9cd4-11ee-b124-e94d9e16412a",
            "431f5481-e817-11ea-99fa-3999d87cf81f",
            "86bcb77a-2307-11eb-8499-a95777b85eb2",
            "8a20ab09-6df3-11ec-b5fe-55f9815853c3",
            "1ca407fb-1930-11ed-a93c-ed94ea010af0",
            "1db7f4bc-b427-11e9-9b2c-0776d57a71a4",
            "d188c82b-87eb-11ed-bc3c-c1afa85bfa48",
            "e75bd848-4fd0-11eb-ada9-b5b894b72e1e"
        ];
        // if(noAuth.indexOf(this.storeId)!=-1){
        //     this.topBar = JSON.parse(JSON.stringify(this.noAuthtopBar));
        // }
        this.initActiveClass();
    },
    mounted: function () {
    },
    beforeDestroy: function () {
        // sessionStorage.removeItem('store');
        // sessionStorage.removeItem('token');
    }
  }
</script>
<style lang="scss" scoped>
  @import "index";
</style>